<template>
  <div class="wrap" :style="{ fontSize: modelFontSize + 'px' }">
    <div :style="{ color: dataAColor }">{{ dataAText }}</div>
    <div
      class="bar"
      :data-A="percentA + '%'"
      :data-B="percentB + '%'"
      :style="{
        background: backLinearColor,
        height: modelBarHeight + 'px',
        '--a-percent': percentA + '%',
        '--a-color': dataAColor,
        '--b-percent': percentB + '%',
        '--b-color': dataBColor,
      }"
    ></div>
    <div :style="{ color: dataBColor }">{{ dataBText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelFontSize: 27,
      modelBarHeight: 27,
      dataAValue: 26,
      dataAColor: "rgba(239,129,32,1)",
      dataAText: "标签A",
      dataBValue: 24,
      dataBColor: "rgba(118,178,255,1)",
      dataBText: "标签B",
    }
  },
  computed: {
    percentA() {
      const valA = Number(this.dataAValue) || 0;
      const valB = Number(this.dataBValue) || 0;
      return parseInt((valA / (valA + valB)) * 100);
    },
    percentB() {
      return 100 - this.percentA;
    },
    backLinearColor(){
      return "linear-gradient(to right, " + this.dataAColor + " " + this.percentA + "%, " + this.dataBColor + " " + this.percentA + "%)"
    }
  },
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  .bar {
    flex: 1;

    &::before {
      content: attr(data-A);
      width: var(--a-percent);
      color: var(--a-color);
      display: inline-block;
      text-align: center;
      position: relative;
      top: -1.5em;
    }

    &::after {
      content: attr(data-B);
      width: var(--b-percent);
      color: var(--b-color);
      display: inline-block;
      text-align: center;
      position: relative;
      top: -1.5em;
    }
  }
}
</style>
